<template>
	<view class="profile-container">
		<!-- 顶部标题 -->
		<view class="page-title">个人信息</view>

		<!-- 用户欢迎区域 -->
		<view class="welcome-section">
			<text class="welcome-text">Hi...欢迎回来</text>
			<text class="username">cyz</text>
		</view>

		<!-- 关注和话题统计 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">3</text>
				<text class="stat-label">关注</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">0</text>
				<text class="stat-label">话题</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item">
				<text class="menu-text">收藏</text>
			</view>
			<view class="menu-item">
				<text class="menu-text">历史</text>
			</view>
			<view class="menu-item">
				<text class="menu-text">设置</text>
			</view>
		</view>

		<!-- 发布提示区域 -->
		<view class="publish-section">
			<view class="publish-stats">
				<text class="stats-text">已有385,893人</text>
				<text class="stats-text">在这里发布身边的新鲜事</text>
			</view>
			<view class="publish-buttons">
				<view class="publish-btn primary">
					<text class="btn-text">我也要发布</text>
				</view>
				<view class="publish-btn secondary">
					<text class="btn-text">先去逛逛></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以在这里添加数据
			}
		}
	}
</script>

<style scoped>
	.profile-container {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		min-height: 100vh;
		padding: 0 30rpx;
	}

	/* 页面标题 */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		padding: 60rpx 0 40rpx 0;
	}

	/* 欢迎区域 */
	.welcome-section {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.welcome-text {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.username {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	/* 统计区域 */
	.stats-section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
	}

	/* 菜单区域 */
	.menu-section {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.menu-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		font-size: 32rpx;
		color: #333;
	}

	/* 发布区域 */
	.publish-section {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.publish-stats {
		margin-bottom: 30rpx;
	}

	.stats-text {
		display: block;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		line-height: 1.6;
	}

	.publish-buttons {
		display: flex;
		gap: 20rpx;
	}

	.publish-btn {
		flex: 1;
		padding: 24rpx 0;
		border-radius: 50rpx;
		text-align: center;
	}

	.publish-btn.primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.publish-btn.secondary {
		background: white;
		border: 2rpx solid #667eea;
	}

	.publish-btn.primary .btn-text {
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}

	.publish-btn.secondary .btn-text {
		color: #667eea;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>